<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echart01</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .bar {
            width: 600px;
            height: 300px;
            margin: 200px auto;
            background-color: rgb(14, 14, 14);
        }

        .pie {
            width: 600px;
            height: 300px;
            margin: 200px auto;
            background-color: rgb(14, 14, 14);
        }

        .test {
            background-color: tomato;
        }
    </style>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.js"></script>

</head>

<body>
    <div class="bar"></div>
    <button id="btn">按我切换</button>
    <div class="pie"></div>
    <div class="test">123</div>


</body>
<script>
    // 初始化echarts，本质是把原生dom给echart加工封装一下
    let myChart = echarts.init($('.bar').get(0));// 似乎只能用原生dom完成初始化
    // 指定配置项，一般是在echarts官网上查看并复制，然后更改来用的
    // 配置项(option)本质是一个对象，里面可以指定表头，标题为代表的静态图表信息和各种实际数据为代表的动态数据信息
    // 因此经常出现对象套对象，数组套对象，对象套数组等各种数据格式
    // 常见的动态数据，多用数组盛放


    // 备用数据

    let data1 = [[5, 20, 36, 10, 10, 20], [20, 5, 30, 56, 74, 30], [20, 12, 50, 4, 12, 25]];
    let data2 = [[15, 24, 6, 20, 5, 32], [41, 12, 35, 37, 20, 29], [12, 7, 60, 52, 31, 42]];

    myChart.index = 0;
    let option = {
        title: /*标题*/{
            text: 'ECharts 入门示例',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: { trigger: 'item' },
        legend: /*图例*/{
            data: ['销量1', '销量2'],
            textStyle: {
                color: '#fff'
            }
        },
        xAxis: /*x轴*/{
            type: 'category',
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: /*y轴*/ { type: 'value' },
        series:/*系列，可以指定多个系列，一个系列对应一组相关数据*/[{
            name: '销量1',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        },
        {
            name: '销量2',
            type: 'bar',
            data: [15, 24, 6, 20, 5, 32]
        }],
        textStyle: { color: '#fff' },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar', 'stack'] },
                restore: {},
                saveAsImage: {}
            }
        },
        grid: {
            top: '20%',
            left: '4%',
            bottom: '4%',
            containLabel: true
        },
        color: ['aqua', 'orangered']// 指定折线、柱、饼等基本构成元素的颜色
    };
    // 将配置信息交给echart对象去处理即可
    myChart.setOption(option);

    let pie = echarts.init($('.pie').get(0));
    // 第二个示例，饼图
    // 饼图不支持 magicType,grid
    let option1 = {
        title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center',
            textStyle: { color: '#fff' }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: { color: '#fff' }
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '搜索引擎' },
                    { value: 735, name: '直接访问' },
                    { value: 580, name: '邮件营销' },
                    { value: 484, name: '联盟广告' },
                    { value: 300, name: '视频广告' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ],

    };
    pie.setOption(option1);
    $('#btn').on('click', function () {
        if (option.series[0].type == 'bar') {
            option.series[0].type = 'line';
            option.series[1].type = 'line';
        }
        else {
            option.series[0].type = 'bar';
            option.series[1].type = 'bar';
        }
        myChart.setOption(option);
    })

    // 以上即个人自定义实现表格更新的方法
    setInterval(() => {
        option.series[0].data = data1[myChart.index];
        option.series[1].data = data2[myChart.index];
        myChart.setOption(option);
        myChart.index = myChart.index < 2 ? myChart.index + 1 : 0;
    }, 2000);


</script>

</html>